<template>
  <div class="search-top-box">
    <div class="left-box">
      <p-row :gutter="16">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户编号</span>
            <div class="item-right">
              <p-input v-model="form.code" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户名称</span>
            <div class="item-right">
              <p-input
                v-model="form.customerName"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户简称</span>
            <div class="item-right">
              <p-input
                v-model="form.name"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户分类</span>
            <p-select
              class="item-right"
              :value="form.classificationCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'classificationCode')"
            >
              <p-select-option
                v-for="item in classificationList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
      </p-row>

      <p-row :gutter="16" style="margin-top: 6px">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">销售组织</span>
            <p-select
              class="item-right"
              :value="form.salesOrgCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'salesOrgCode')"
            >
              <p-select-option
                v-for="item in salesGroupOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">KAPM组</span>
            <p-select
              class="item-right"
              :value="form.pmGroupCode"
              :placeholder="'请选择'"
              :show-arrow="true"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'pmGroupCode')"
            >
              <p-select-option
                v-for="item in pmGroupCodeList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">销售组</span>
            <p-select
              class="item-right"
              :value="form.salesGroupCode"
              :placeholder="'请选择'"
              :show-arrow="true"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'salesGroupCode')"
            >
              <p-select-option
                v-for="item in salesGroupList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left"> 创建时间 </span>
            <div class="item-right">
              <DateRangePicker
                class="date-box"
                :start.sync="form.startCreateTime"
                :end.sync="form.endCreateTime"
              />
            </div>
          </div>
        </p-col>
      </p-row>
    </div>
    <div class="right-box">
      <p-button
        class="btn"
        type="primary"
        @click="searchTableList"
      >
        搜索
      </p-button>
      <p-button class="btn" @click="resForm">重置</p-button>
      <p-button @click="exportFile">导出</p-button>
    </div>
  </div>
</template>

<script>
import DateRangePicker from '@/components/picker/DateRangePicker.vue';

import { getDicList } from '@/api/public.js';
import { postCustomerMainExport } from '@/api/customerMaintain.js'

import { downloadFile } from '@/utils/index.js';

const defaultForm = {
  code: '', // 客户编号
  customerName: '', // 客户名称
  name: '', //客户简称
  classificationCode: '', // 客户分类
  salesOrgCode: '', // 销售组织
  salesGroupCode: '', // 销售组
  pmGroupCode: '', // kapm组
  startCreateTime: '',
  endCreateTime: '',
  column: '',
};
const all = { label: '全部', value: '' };
export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      form: {
        code: '', // 客户编号
        customerName: '', // 客户名称
        classificationCode: '', // 客户分类
        salesOrgCode: '', // 销售组织
        salesGroupCode: '', //  销售组
        pmGroupCode: '', // kapm组
        startCreateTime: '',
        endCreateTime: '',
        column: '',
      },
      classification: [], // 客户分类数据
    };
  },
  computed: {
    // 销售组织
    salesGroupOptions() {
      return [{ name: 'ALL', code: '' }, ...this.orgGroupOptions];
    },
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: false
      });
    },
    // 客户分类
    classificationList() {
      return [{ label: 'ALL', value: '' }, ...this.classification];
    },
    // kapm组
    pmGroupCodeList() {
      return [{ name: 'ALL', code: '' }, ...this.pmGroupCodeOptions];
    },
    pmGroupCodeOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
    },
    // 销售组
    salesGroupList() {
      return [{ name: 'ALL', code: '' }, ...this.salesOrgOptions];
    },
    salesOrgOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
    },
    getSearchParams() {
      return {
        ...this.form,
      };
    },
  },
  created() {
    this.getClassificationList();
  },
  methods: {
    // 客户分类List
    async getClassificationList() {
      const result = await getDicList('customer_type');
      this.classification = result?.data?.data;
    },
    // 选中值
    handleChange(val, key) {
      this.form[key] = val;
      console.log(this.form);
    },
    async searchTableList() {
      this.$emit('search');
    },

    resForm() {
      this.form = { ...defaultForm };
      this.$emit('search', true);
    },
    // 导出
    async exportFile() {
      const data = this.form;
      const res = await postCustomerMainExport({ ...data, isSubmersible: false });
      await downloadFile(res.data, res.filename || '潜客维护列表.xls');
    },
  },
};
</script>

<style lang="less" scope>

.search-top-box {
  display: flex;
  // padding: 10px 20px;
  width: 100%;
  background: #f7f7f8;
  border: 1px solid #e5e6e9;
  margin-bottom: 10px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        width: 70px;
        padding-right: 8px;
        text-align: end;
      }
      .item-right {
        flex: 3;
      }
    }
  }
  .right-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    .btn {
      margin-right: 8px;
    }
  }
}
</style>
